@charset "utf-8";

/*-- 布局
---------------------------------*/
html, body {
    height: 100%;
}

.w-auto {
    width: 100%;
}

.head,
.wrap,
.content,
.area {
    margin: 0 auto;
}

.area {
    overflow: hidden;
}

.wrap {
    min-height: 100%;
    padding-bottom: 80px;
    overflow: hidden;
    box-sizing: border-box;
}

/*一列*/
.content {
}

/*左右两列*/
.side-l {

}

.main {

}

/*左中右三列*/
.l-con {
}

.center {
}

.r-con {
}

/*-- textarea ,input
------------------------------*/
.com-area {
    width: 360px;
    height: 120px;
    padding: 5px;
    font-size: 14px;
    line-height: 18px;
    border: 1px solid #d7d7d7;
    overflow-y: auto;
    /*font-family: arial;*/
    word-wrap: break-word;
    color: #666;
    background-color: #fff;
    -moz-transition: border-color .2s ease, background-color .2s ease;
    -webkit-transition: border-color .2s ease, background-color .2s ease;
    transition: border-color .2s ease, background-color .2s ease;
    -webkit-appearance: none;
}

.com-area:focus,
.com-area_focus {
    background-color: #fdfbef;
    color: #333;
}

.input-text {
    width: 100%;
    height: .18rem;
    line-height: .18rem;
    padding: .2rem .05rem;
    font-size: .14rem;
    vertical-align: middle;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #ccc;
    overflow: hidden;
    -moz-transition: background-color .2s ease;
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
    -webkit-appearance: none;
}

.input-text:focus {
    color: #666;
    background-color: #fff;
}

.err-input {
    -webkit-animation: error .2s 3;
    -moz-animation: error .2s 3;
    animation: error .2s 3;
    background-color: #fcc;
}

.err-box {
    color: #fc714c;
    border: 1px solid #fc714c;
}

/*title*/
.g-title {
    margin: 0.1rem;
    padding: 0 0.05rem;
    height: .44rem;
    line-height: .46rem;
    font-size: .16rem;
    color: #666;
    border-bottom: 1px solid #e3e3e3;
	font-weight: bold;
}

/*1像素阴影*/
.shadow {
    margin-bottom: .1rem;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

/*头像*/
.avatar {
    overflow: hidden;
}

.avatar .name {
    font-size: .12rem;
    color: #999;
    text-align: center;
}

.avatar img {
    width: .5rem;
    height: .5rem;
    border-radius: 100%;
}

/*更多*/
.more {
    display: inline-block;
    font-size: .14rem;
    color: #999;
}

.money {
    margin-right: 2px;
    font: 400 .14rem arial;
}

/*面包屑*/
.breadcrumbs {
    padding: 20px 0 16px;
    color: #999;
    font-size: 14px;
}

.breadcrumbs a {
    max-width: 500px;
    display: inline-block;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: top;
}

.breadcrumbs a:hover {
    color: #60a3ef;
}

.breadcrumbs em {
    padding: 0 10px;
    font-family: simsun;
}

/*信用*/
.g-credit img {
    height: 16px;
    vertical-align: top;
}

/*模糊*/
.blur {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

.flex {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    /*    -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;*/
}

/*无内容*/
.not-con {
    padding: 0 .2rem;
    min-height: 1.9rem;
    font-size: .16rem;
    color: #999;
    text-align: center;
}

/*单选框，复选框*/

input[type="checkbox"],
input[type="radio"] {
    height: .16rem;
    width: .16rem;
    vertical-align: -.03rem;
    margin-right: .1rem;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

input[type="checkbox"] {
    border-radius: 0;
    background: url(../images/ico-checkbox.png) no-repeat;
    background-size: contain;
}

input[type="checkbox"]:enabled:hover,
input[type="radio"]:enabled:hover {
    border-color: #6ba7eb;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="checkbox"]:enabled:checked {
    background: #fff url(../images/ico-checkbox-c.png) no-repeat;
    background-size: contain;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: 0.7;
    background-color: #f9f9f9;
}

input[type="radio"] {
    width: .16rem;
    height: .16rem;
    border-radius: 50%;
    background: url(../images/ico-radio.png) no-repeat;
    background-size: contain;
}

input[type="radio"]:enabled:checked {
    background: #fff url(../images/ico-radio-c.png) no-repeat;
    background-size: contain;
}

/*功能提示框 4个方向箭头*/

.arrow-t:before,
.arrow-b:before,
.arrow-l:before,
.arrow-r:before {
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    content: "";
    overflow: hidden;
    border-width: 6px;
    border-style: solid;
}

.arrow-t:before {
    top: -12px;
    border-color: transparent transparent rgba(0, 0, 0, .5) transparent;
}

.arrow-b:before {
    bottom: -12px;
    border-color: rgba(0, 0, 0, .5) transparent transparent transparent;
}

/*返回顶部*/
.back-top {
    position: fixed;
    right: .1rem;
    bottom: .6rem;
    z-index: 101;
    font-size: .14rem;
    background-color: rgba(0, 0, 0, .5);
}

.back-top .link {
    display: block;
    width: .44rem;
    height: .44rem;
    text-align: center;
    border-top: 1px solid #fff;
}

.g-features {
    position: relative;
}

.g-features .down {
    display: none;
    position: absolute;
    right: 0;
    bottom: .5rem;
    width: 0.8rem;
    padding: 0 .02rem;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 3px;
}

.g-features .down li a {
    display: block;
    height: .4rem;
    line-height: .4rem;
    color: #fff;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid #969696;
}

.g-features .arrow-b:before {
    right: 18%;
}

/*首页 底部固定 下载  */

.fixed-down {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 101;
    width: 100%;
    height: .46rem;
    font-size: .14rem;
    color: #fff;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .7);
}

.fixed-down .close {
    position: absolute;
    right: 0;
    top: 0;
    width: .3rem;
    height: .3rem;
    background-color: rgba(255, 255, 255, .15);
    border-radius: 0 0 0 30px;
}

.fixed-down .close .ico {
    margin: 4px 0 0 13px;
}

.fixed-down .btn-app {
    padding: 0 .35rem 0 .06rem;
    height: inherit;
    color: #fff;
    text-align: center;
}

.fixed-down h3 {
    padding: 0 .05rem;
    line-height: .18rem;
}

.fixed-down .g-btn {
    border-radius: 3px;
}

.fixed-down .g-btn-open {
    margin: 0 .35rem 0 .06rem
}

/*固定顶部活动图*/
.fixed-down.fixed-pic {
    position: fixed;
    height: .54rem;
    z-index: 200;
}

.fixed-pic .pic {
    display: block;
    width: 100%;
    height: .54rem;
    background: url("../images/file/618.png") no-repeat 6px center;
    background-size: 90% auto;
}

/*小图标*/

.s-class,
.s-live {
    display: inline-block;
    margin-left: .05rem;
    width: .38rem;
    height: .16rem;
    line-height: .16rem;
    color: #59abff;
    font-size: .12rem;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #59abff;
    background-color: #f9fcff;
    border-radius: 1px;
}

.s-live {
    color: #ffac35;
    border: 1px solid #ffac35;
    background-color: #fffdf9;
}

/*课程详情页 底部固定  （分享 收藏 立即购买）*/
.d-buynow {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    margin-top: .1rem;
    font-size: .16rem;
    border-top: 1px solid #e2e2e2;
    color: #666;
    overflow: hidden;
    background-color: #fff;
}

.d-buynow li {
    float: left;
    width: 26%;
    height: .54rem;
    line-height: .54rem;
    display: block;
    text-align: center;
    box-sizing: border-box;
}

.d-buynow li a {
    display: block;
    color: #666;
}

.d-buynow .btn-collect {
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
}

.d-buynow .btn-buy,
.d-buynow .btn-appraise {
    width: 48%;
}

.d-buynow .btn-buy a {
    display: block;
	font-family: "微软雅黑";
    color: #fff;
    height: 100%;
    line-height: .14rem;
    background-color: #F5504D;
}

.d-buynow .btn-buy .num {
    padding-top: 13px;
    font-size: .23rem;
}

.d-buynow .btn-buy .money {
    font-size: .16rem;
}

.d-buynow .btn-buy .buy {
    font-size: .14rem;
}

.d-buynow .btn-appraise .num {
    display: none;
}

.d-buynow .btn-appraise .buy {
    height: .54rem;
    line-height: .56rem;
    color: #fff;
    font-size: .18rem;
    background-color: #43c0b5;
}

.btn-appraise.g-disable .buy {
    color: #dfdfdf;
    background-color: #959595;
}

/*分享*/
.g-share {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 102;
    width: 100%;
    font-size: .16rem;
    color: #999;
    text-align: center;
    background-color: #fff;
    box-sizing: border-box;
}

.g-share .title {
    height: .5rem;
    line-height: .5rem;
    color: #b8b8b8;
}

.g-share ul {
    padding: .05rem .15rem .15rem .15rem;
}

.g-share li {
    display: block;
    width: 20%;

}

.g-share .btn {
    display: block;
    border-top: 1px solid #e3e3e3;
    height: .44rem;
    line-height: .44rem;
    color: #b8b8b8;
}

/*评论*/
.comment {
    background-color: #fff;
}

.comment-complete {
    margin: 0 .1rem;
    overflow: hidden;
    border-bottom: 1px solid #e3e3e3;
}

.comment-complete a {
    display: block;
    padding-top: .07rem;
    width: 25%;
    float: left;
    height: .39rem;
    line-height: 18px;
    font-size: .14rem;
    color: #999;
    text-align: center;
}

.comment-complete .cur {
    color: #43c0b5;
}

.comment-complete .num {
    display: block;
}

.comment .item {
    margin: 0 .1rem;
    padding: .15rem .05rem;
    font-size: .14rem;
    overflow: hidden;
    border-bottom: 1px solid #e3e3e3;
}

.comment .item:last-child {
    border-bottom: none;
}

.comment .avatar {
    margin-right: .12rem;
    width: .52rem;
    text-align: center;
    overflow: hidden;
}

.comment .right-box {
}

.comment .praise {
    padding-bottom: 5px;
    color: #999;
    font-size: .14rem;
}

.comment .praise span {
    font-size: .12rem;
}

.comment .info {
    line-height: .18rem;
    color: #666;
}

/*-- 按钮集合
------------------------------*/
.g-btn {
    font-size: .14rem;
    color: #fff;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}

.g-btn1,
.g-btn2 {
    width: .7rem;
    height: .3rem;
    line-height: .3rem;
    background-color: #3bc0b6;
}

.g-btn2 {
    background-color: #fa5a5d;
}

.g-disable {
    cursor: default;
    color: #dfdfdf;
    background-color: #959595;
}

/*-- ico20 图表集合
------------------------------*/
.ico {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    background-size: contain !important;
}

.ico-more {
    width: .11rem;
    height: .12rem;
    vertical-align: -1px;
    background: url("../images/ico-more.png") no-repeat right center;
}

.ico-unfold {
    height: .2rem;
    background: url("../images/ico-unfold.png") no-repeat center;
    background-size: auto 60%;
}

.ico-up {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.ico-share {
    margin-right: 5px;
    width: .21rem;
    height: .23rem;
    vertical-align: middle;
    background: url("../images/ico-share.png") no-repeat;
}

.ico-lessonqq {
    margin-right: 5px;
    width: .21rem;
    height: .23rem;
    vertical-align: middle;
    background: url("../images/ico-lessonqq.png") no-repeat;
}

.ico-collect {
    margin-right: 5px;
    width: .22rem;
    height: .2rem;
    vertical-align: middle;
    background: url("../images/ico-collect.png") no-repeat;
}

.ico-phone {
    margin-right: 5px;
    width: .2rem;
    height: .22rem;
    vertical-align: middle;
    background: url("../images/ico-phone.png") no-repeat;
}

.ico-share2,
.ico-collect2 {
    margin-right: 5px;
    width: .14rem;
    height: .14rem;
    vertical-align: middle;
    background: url("../images/ico-share2.png") no-repeat;
}

.ico-collect2 {
    height: .14rem;
    background: url("../images/ico-collect2.png") no-repeat left center;
}

.ico-top,
.ico-features {
    margin-top: 9px;
    width: .26rem;
    height: .26rem;
    line-height: 200px;
    background: url("../images/ico-top.png") no-repeat;
}

.ico-features {
    background: url("../images/ico-features.png") no-repeat;
}

.ico-ck-app {
    width: .32rem;
    height: .32rem;
    background: url("../images/ico-ck-app.png") no-repeat;
}

/*信用*/
.ico-credit {
    width: .15rem;
    height: .13rem;
    background: url("../images/ico-credit.png") no-repeat;
}

/*关闭*/
.ico-close {
    width: .11rem;
    height: .11rem;
    background: url("../images/ico-close.png") no-repeat;
}

/*分享*/
.ico-wx,
.ico-pyq,
.ico-qq,
.ico-qzone,
.ico-weibo {
    width: .5rem;
    height: .5rem;
}

.ico-wx {
    background: url("../images/share/ico-wx.png") no-repeat;
}

.ico-pyq {
    background: url("../images/share/ico-pyq.png") no-repeat;
}

.ico-qq {
    background: url("../images/share/ico-qq.png") no-repeat;
}

.ico-qzone {
    background: url("../images/share/ico-qzone.png") no-repeat;
}

.ico-weibo {
    background: url("../images/share/ico-weibo.png") no-repeat;
}

/*内容为空*/
.ico-not-info,
.ico-not-course {
    margin: .1rem auto;
    width: .6rem;
    height: .6rem;
    color: #999;
    background: url("../images/common/ico-not-introduction.png") no-repeat center;
}

.ico-not-course {
    background: url("../images/common/ico-not-course.png") no-repeat center;
}

/* 页面loading */
#spinners {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9999;}
.spinner {margin:  50% 30%;width: 40%;text-align: center;}
.spinner > div {width: 30px;height: 30px;background-color: #67CF22;border-radius: 100%;display: inline-block;-webkit-animation: bouncedelay 1.4s infinite ease-in-out;animation: bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.spinner .bounce1 {-webkit-animation-delay: -0.32s;animation-delay: -0.32s;}
.spinner .bounce2 {-webkit-animation-delay: -0.16s;animation-delay: -0.16s;}
@-webkit-keyframes bouncedelay {0%, 80%, 100% { -webkit-transform: scale(0.0) }40% { -webkit-transform: scale(1.0)}}
@keyframes bouncedelay {0%, 80%, 100% {transform: scale(0.0);-webkit-transform: scale(0.0);} 40% {transform: scale(1.0);-webkit-transform: scale(1.0);}}

/* 分享样式 */
#shareit {
  -webkit-user-select: none;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  text-align: center;
  top: 0;
  left: 0;
  z-index: 105;
}
#shareit img {
  max-width: 100%;
}
.arrow {
  position: fixed;
  right: 10%;
  top: 5%;
}
#share-text {
  margin-top: 70%;
}

/* 菜单栏显示 */
.nav-top_bar { position: fixed; z-index: 900; bottom: 0; left: 0; right: 0; margin: auto; font-family: Helvetica, Tahoma, Arial, Microsoft YaHei, sans-serif; }
.nav-top_menu { display:-webkit-box; border-top: 1px solid #22968D; display: block; width: 100%; height: 48px; display: -webkit-box; display: box; margin:0; padding:0; -webkit-box-orient: horizontal; background:#3bc0b6; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset; }
.nav-top_bar .nav-top_menu li {width:25%; -webkit-box-flex:1; position:relative; text-align:center; }
.nav-top_bar .nav-top_menu li a { height:48px; margin-right: 1px; display:block; text-align:center; color:#FFF; text-decoration:none; text-shadow: 0 1px rgba(0, 0, 0, 0.3); -webkit-box-flex:1; }
.nav-top_bar .nav-top_menu li a label { overflow:hidden; margin: 0; font-size: 12px; display: block !important; line-height: 18px; text-align: center; }
.nav-top_bar .nav-top_menu li a img { padding:0; height: 24px; width: 24px; color: #fff; line-height: 48px; vertical-align:text-top; }
.nav-top_bar .nav-top_menu li a.active { background-color:#22968D; }